<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>客服欢迎语</title>
	<link rel="stylesheet" href="/layui/css/layui.css">
	<link rel="stylesheet" href="/hyqcss/public.css">
	<link rel="stylesheet" href="/fission/css/common.css">
    <link rel="stylesheet" href="/fission/css/iconfont.css">
	<style type="text/css">
		body{
			background: #e9e9e9;
		}
		/*公共头部带搜索*/
		.public_container{
			margin: 20px;
			background: #fff;
		}
		.public_title_container{
			height: 54px;
			padding: 0 20px;
			font-size: 14px;
			display: flex;
			align-items: center;
			background: #f9f9f9;
			border-bottom: 1px solid #f0f0f0;
			justify-content: space-between;
		}
		.public_title_container a{
			fill: #999;
		}
		/*公共表单部分*/
		.public_form_container{
			padding: 20px 20px 40px 20px; 
		}
		.public_form_content{
			padding: 24px 40px 24px 0;
			background: #fff;
			border: 1px solid #e9e9e9;
			margin-bottom: 8px;
		}
		.public_form_List{
			margin-bottom: 10px;
		}
		.public_form_List:last-child{
			margin-bottom: 0px;
		}
		.public_formTitle_container lable{
			font-size: 13px;
			font-weight: bold;
		}/*新加的设置回复信息里选择 菜单 start*/
		.addKeywordMenuList_continaer{

		}
		.addKeywordMenuList_continaer li{
			display: flex;
			align-items: center;
			margin-bottom: 15px;
			width: 120px;
		}
		.addKeywordMenuList_left_continaer{
			display: flex;
			align-items: center;
		}
		.addKeywordMenuList_leftSelect_continaer{
			width: 120px;
		}
		.addKeywordMenuList_leftInput_continaer{
			display: flex;
			align-items: center;
		}
		.addKeywordMenuList_right_continaer{
			margin-left: 20px;
		}
		.addKeywordMenuList_AddButton_container{
			
		}
	</style>
</head>
<body>
	<!-- 顶部提示框 开始 -->
	<div class="public_tipSetting_contaienr">
		<div class="public_tipSetting_content">
			<p>欢迎语功能说明：只有在智能助手模式下，且客户第二次打开聊天链接才可触发欢迎语</p>
		</div>
	</div>
	<form class="layui-form" id="form1">
		

		<div class="public_container">
			<!-- /*公共头部带搜索*/ -->
			<div class="public_content">
				<div class="public_title_container">
					<p>新建客服欢迎语</p>
					<a href="javascript:history.back(-1)">
						<svg t="1599462684269" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8055" width="20" height="20"><path d="M501.2992 273.408l1.024-156.16L184.65792 379.904l314.29632 266.1376 0.95232-149.2992c313.86624 42.5984 178.29888 231.3216-0.5632 410.2144 619.5712-404.3776 251.01312-590.6432 1.95584-633.5488z" p-id="8056"></path></svg>
					</a>
				</div>
			</div>
			<!-- /*公共头部带搜索*/ end -->
			<!-- 公共表单部分 -->
			<div class="public_form_container"> 
				<div class="public_form_content">
					<div class="public_form_List">
						<div class="public_formTitle_container">
							<lable class="layui-form-label">匹配方式：</lable>
						</div>
						<div class="public_formOther_container">
							<div class="layui-input-block" id="shareuser">
								<input type="radio" lay-filter="shareuser" name="shareuser" value="1" title="通用" {if !$welcome->id}checked{/if} {if $welcome->type == 1}checked{/if}>
								<input type="radio" lay-filter="shareuser" name="shareuser" value="2" title="按客服"  {if $welcome->type == 2}checked{/if}>
							</div>
						</div>
					</div>
					<div class="public_form_List shareuser" id="seleatLable"  {if $welcome->type == 1 || !$welcome->type}style="display: none; margin-bottom: 0;" {/if}>
						<div class="public_formTitle_container">
							<lable class="layui-form-label">选择客服：</lable>
						</div>
						<div class="public_formOther_container">
							<div class="layui-input-block">
								<span class="layui-btn layui-btn-primary" id="addPeople">+ 前往添加</span>
							</div>
						</div>
						<input type="hidden" name="checkUser" id="checkUser" value="{implode(',',json_decode($welcome->users,1))}" />
						<div id="checkUserCon" style="padding: 10px 0px 0px 105px;">
							{loop json_decode($welcome->users,1) as $userid}
					        	<div class="service-card">
						        	<i class="iconfont icon-person"></i>{$this->get_user_name($userid)}
						        </div>
					      	{/loop}
						</div>
					</div>
				</div>
				<div class="public_form_content">
					
					<div class="public_form_List">
						<div class="public_formTitle_container">
							<lable class="layui-form-label">选择类型：</lable>
						</div>
						<div class="public_formOther_container">
							<div class="layui-input-block" id="shareType">
								<input type="radio" lay-filter="shareType" name="shareType" value="1" title="文本" {if !$welcome->id}checked{/if} {if $welcome->other_type == 1}checked{/if}>
								<input type="radio" lay-filter="shareType" name="shareType" value="8" title="菜单" {if $welcome->other_type == 8}checked{/if}>
							</div>	
						</div>
					</div>
					<!-- 文本 -->
					<div class="public_form_List publicHide_content" id="text"  {if $welcome->other_type != 1} style="display: none;" {/if}>
						<div class="public_formTitle_container">
							<lable class="layui-form-label">文本：</lable>
						</div>
						<div class="public_formOther_container">
							<div class="layui-input-block">
							  <textarea name="text_content" value="{$welcome->text}" id="text_content" {if $welcome->other_type == 1} lay-verify="required" {/if} placeholder="请输入内容" class="layui-textarea">{$welcome->text_content}</textarea>
							</div>
						</div>
					</div>
					
					<!-- 菜单 -->
					<div class="public_form_List publicHide_content" id="menuDiv" {if $welcome->other_type != 8} style="display: none;" {/if}>
						<div class="layui-form-item">
							<label class="layui-form-label">顶部文字</label>
							<div class="layui-input-block" style="width: 500px;">
								<input type="text" name="topText" id="topText" value="{$welcome->toptext}" placeholder="请输入顶部文字" autocomplete="off" class="layui-input">
							</div>
						</div>

						<div class="layui-form-item">
							<label class="layui-form-label">菜单列表</label>
							<div class="layui-input-block">
								<ul class="addKeywordMenuList_continaer">
									{if !$welcome->menu}
										<li>
											<div class="addKeywordMenuList_left_continaer">
												<div class="addKeywordMenuList_leftSelect_continaer">
													<select name="menuType0" lay-filter="menuType">
													  <option value="0">点击菜单</option>
													  <option value="1">跳转网址</option>
													</select>
												</div>
												<div class="addKeywordMenuList_leftInput_continaer">
													<div class="layui-input-block inputMenuName" style="width: 300px; margin-left: 20px;">
														<input type="text" name="minText0" value="" id="minText" placeholder="请输入内容" autocomplete="off" class="layui-input">
													</div>
													<div class="layui-input-block inputMenuLink" style="width: 300px; margin-left: 20px; display:none;">
														<input type="text" name="topurl0" value="" placeholder="请输入网址" autocomplete="off" class="layui-input">
													</div>
												</div>
											</div>
											<div class="addKeywordMenuList_right_continaer">
												<button type="button" class="layui-btn layui-btn-danger removeList" data-id="0">删除</button>
											</div>
										</li>
									{else}
										{loop $welcome->menu as $key=>$menu}
											<li>
												<div class="addKeywordMenuList_left_continaer">
													<div class="addKeywordMenuList_leftSelect_continaer">
														<select name="menuType{$key}" lay-filter="menuType">
														  <option value="0" {if $menu['type'] == 0}selected{/if}>点击菜单</option>
														  <option value="1" {if $menu['type'] == 1}selected{/if}>跳转网址</option>
														</select>
													</div>
													<div class="addKeywordMenuList_leftInput_continaer">
														<div class="layui-input-block inputMenuName" style="width: 300px; margin-left: 20px;">
															<input type="text" name="minText{$key}"value="{$menu['text']}" {if $welcome->other_type == 8}lay-verify="required"{/if} placeholder="请输入内容" autocomplete="off" class="layui-input">
														</div>
														<div class="layui-input-block inputMenuLink" {if $menu['type'] == 0}style="width: 300px; margin-left: 20px;display:none;"{else}style="width: 300px; margin-left: 20px;"  {/if} >
															<input type="text" name="topurl{$key}"  value="{$menu['url']}" placeholder="请输入网址" autocomplete="off" class="layui-input">
														</div>
													</div>
												</div>
												<div class="addKeywordMenuList_right_continaer">
													<button type="button" class="layui-btn layui-btn-danger removeList" data-id="{$key}">删除</button>
												</div>
											</li>
										{/loop}
									{/if}
								</ul>
								<div class="addKeywordMenuList_AddButton_container">
									<button type="button" class="layui-btn layui-btn-primary addKeywordMenuList_AddButton">添加菜单</button>
								</div>
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">底部文字</label>
							<div class="layui-input-block" style="width: 500px;">
								<input type="text" name="downText" value="{$welcome->buttext}" id="downText" placeholder="请输入底部文字" autocomplete="off" class="layui-input" >
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">小程序</label>
							<div class="layui-input-block">
								<input type="checkbox" name="miniprograms_status" lay-skin="switch" lay-filter="miniprograms" {if $welcome->miniprograms_status == 1}checked{/if}>
							</div>
						</div>
						<div id="miniprogram" {if $welcome->miniprograms_status != 1}style="display:none;"{/if}>
							<div class="layui-form-item">
								<label class="layui-form-label">APPid：</label>
								<div class="layui-input-block" style="width: 500px;">
									<input type="text" name="welcome_miniprogram_appid" id="welcome_miniprogram_appid" value="{$welcome->miniprograms['welcome_miniprogram_appid']}" placeholder="小程序Appid" autocomplete="off" class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">路径：</label>
								<div class="layui-input-block" style="width: 500px;">
									<input type="text" name="welcome_miniprogram_page" id="welcome_miniprogram_page" value="{$welcome->miniprograms['welcome_miniprogram_page']}" placeholder="小程序路径" autocomplete="off" class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">名称：</label>
								<div class="layui-input-block" style="width: 500px;">
									<input type="text" name="welcome_miniprogram_name" id="welcome_miniprogram_name" value="{$welcome->miniprograms['welcome_miniprogram_name']}" placeholder="小程序名称" autocomplete="off" class="layui-input">
								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="layui-form-item">
					<div class="layui-input-block">
						<a class="layui-btn" lay-submit lay-filter="formDemo">立即提交</a>
						<!--<button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
					</div>
				</div>
			</div>
			<!-- 公共表单部分 end-->
		</div>
	</form>
	<script src="/cdn/jquery.js"></script>
	<script src="/layui/layui.js"></script>
	<script src="/js/ajax.js"></script>
	<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=MLGBZ-2TG32-6KOUF-CIOJ6-BENLJ-Z5BHQ"></script>
	<script type="text/javascript">
		$('#addPeople').on('click',function(){
			if('{$welcome->users}'){
				layer.open({
					type: 2,
					title: '请选择人员',
					shadeClose: true,
					shade: 0.2,
					area: ['700px', '530px'],
					content: 'select_kf-{$welcome->id}-1.html'
				}); 
			}else{
				layer.open({
				  	type: 2,
				  	title: '请选择人员',
				  	shadeClose: true,
				  	shade: 0.2,
				  	area: ['700px', '530px'],
				  	content: 'select_kf.html'
				}); 
			}
			
		})
		window.onload=function(){
			if("{$welcome->id}"){
				is_type("{$welcome->other_type}");
			}else{
				$('#image').removeAttr("lay-verify");
				$('#link_title').removeAttr("lay-verify");
				$('#miniprogram_page').removeAttr("lay-verify");
				$('#miniprogram_name').removeAttr("lay-verify");
				$('#link_url').removeAttr("lay-verify");
				$('#miniprogram_appid').removeAttr("lay-verify");
				$('#miniprogram_title').removeAttr("lay-verify");
				$('#miniprogram_pic').removeAttr("lay-verify");
				$('#topText').removeAttr("lay-verify");
				$('#downText').removeAttr("lay-verify");
				$('#vioce_url').removeAttr("lay-verify");
				$('#video_url').removeAttr("lay-verify");
				$('#file_url').removeAttr("lay-verify");
				$('#link_desc').removeAttr("lay-verify");
				$('#lat').removeAttr("lay-verify");
				$('#lng').removeAttr("lay-verify");
				$('#position_address').removeAttr("lay-verify");
				$('#position_detail').removeAttr("lay-verify");
				$('#minText').removeAttr("lay-verify");
				$('#link_pic').removeAttr("lay-verify");
				$('#text_content').attr("lay-verify","required");
	            $(".publicHide_content").hide();
	            $("#text").show();
			}
		}
	</script>
	<script type="text/javascript">
		var mycars=new Array();
		mycars[0] = 0;
		if("{$count}"){
			for (var i = 0; i < "{$count}"; i++) {
				mycars[i] = i;
			}
		}
		$('body').on('click','.removeList',function(){
			var id = $(this).data("id");
			mycars.splice($.inArray(id,mycars),1);
			$(this).parent().parent().remove();
		})
		$('body').on('click','.addKeywordMenuList_AddButton',function(){
			var leng = $(".addKeywordMenuList_left_continaer").length;
			mycars[leng] = leng;
			$('.addKeywordMenuList_continaer').append('<li><div class="addKeywordMenuList_left_continaer"><div class="addKeywordMenuList_leftSelect_continaer"><select name="menuType'+leng+'" lay-filter="menuType"><option value="0">点击菜单</option><option value="1">跳转网址</option></select></div><div class="addKeywordMenuList_leftInput_continaer"><div class="layui-input-block inputMenuName"style="width: 300px; margin-left: 20px;"><input type="text"name="minText'+leng+'"required value=""placeholder="请输入内容"autocomplete="off"class="layui-input"></div><div class="layui-input-block inputMenuLink"style="width: 300px; margin-left: 20px; display:none;"><input type="text"name="topurl'+leng+'" required value=""placeholder="请输入网址"autocomplete="off"class="layui-input"></div></div></div><div class="addKeywordMenuList_right_continaer"><button type="button"class="layui-btn layui-btn-danger removeList" data-id="'+leng+'">删除</button></div></li>')
			renderForm()
		})
		function renderForm(){
		 layui.use('form', function(){
		  var form = layui.form;//高版本建议把括号去掉，有的低版本，需要加()
		  form.render();
		 });
		}
	</script>
	<script type="text/javascript">
		// 表单
		layui.use('form', function(){
		  var form = layui.form;
		  
		  //监听提交
		  form.on('submit(formDemo)', function(data){
		    //layer.msg(JSON.stringify(data.field));
		    //return false;
			var formData = $('#form1').serialize();	
			var formData = formData+"&mycars="+mycars.toString()
			myAjaxPost(false, true, '', formData, function (resp) {
				if (resp.status == 'success') {
					tusi(resp.msg);
					setTimeout(function(){
						location.href = 'welcome_list_one.html';
					},2000);
				}else{
					alert(resp.msg);
				}
			});
		  });
		  form.on('select(menuType)', function (data) {
		  	console.log(data);
		  	if(data.value == "0"){
		  		$(this).parent().parent().parent().parent().find('.inputMenuLink').hide()
		  	}else if(data.value == "1"){
		  		$(this).parent().parent().parent().parent().find('.inputMenuLink').show()
		  	}
		  })
		  form.on('radio(shareType)', function (data) {
				is_type($('#shareType input[name="shareType"]:checked').val());
                form.render();
            });
		  
	      form.on('switch(miniprograms)', function(data){
	          if(data.elem.checked == true){
	            $("#miniprogram").show();
	          }else{
	            $("#miniprogram").hide();
	          }
	          form.render();
	      });
		  form.on('radio(shareuser)', function (data) {
                if ($('#shareuser input[name="shareuser"]:checked').val() == "1") {
                    $("#seleatLable").hide();
					$('#checkUser').removeAttr("lay-verify");
                }else if($('#shareuser input[name="shareuser"]:checked').val() == "2"){
                	$("#seleatLable").show();
					$('#checkUser').attr("lay-verify","required");
                }
                form.render();
            });
		});
	</script>
<script type="text/javascript">
	function is_type(types){
		if (types == "1") {
			$('#image').removeAttr("lay-verify");
			$('#link_title').removeAttr("lay-verify");
			$('#miniprogram_page').removeAttr("lay-verify");
			$('#miniprogram_name').removeAttr("lay-verify");
			$('#link_url').removeAttr("lay-verify");
			$('#miniprogram_appid').removeAttr("lay-verify");
			$('#miniprogram_title').removeAttr("lay-verify");
			$('#miniprogram_pic').removeAttr("lay-verify");
			$('#topText').removeAttr("lay-verify");
			$('#downText').removeAttr("lay-verify");
			$('#vioce_url').removeAttr("lay-verify");
			$('#video_url').removeAttr("lay-verify");
			$('#file_url').removeAttr("lay-verify");
			$('#link_desc').removeAttr("lay-verify");
			$('#lat').removeAttr("lay-verify");
			$('#lng').removeAttr("lay-verify");
			$('#position_address').removeAttr("lay-verify");
			$('#position_detail').removeAttr("lay-verify");
			$('#minText').removeAttr("lay-verify");
			$('#link_pic').removeAttr("lay-verify");
			$('#text_content').attr("lay-verify","required");
            $(".publicHide_content").hide();
            $("#text").show();
        }else if(types == "8"){
			$('#text_content').removeAttr("lay-verify");
			$('#image').removeAttr("lay-verify");
			$('#link_title').removeAttr("lay-verify");
			$('#link_desc').removeAttr("lay-verify");
			$('#link_pic').removeAttr("lay-verify");
			$('#link_url').removeAttr("lay-verify");
			$('#vioce_url').removeAttr("lay-verify");
			$('#video_url').removeAttr("lay-verify");
			$('#file_url').removeAttr("lay-verify");
			$('#miniprogram_page').removeAttr("lay-verify");
			$('#miniprogram_name').removeAttr("lay-verify");
			$('#miniprogram_appid').removeAttr("lay-verify");
			$('#miniprogram_title').removeAttr("lay-verify");
			$('#miniprogram_pic').removeAttr("lay-verify");
			$('#lat').removeAttr("lay-verify");
			$('#lng').removeAttr("lay-verify");
			$('#position_address').removeAttr("lay-verify");
			$('#position_detail').removeAttr("lay-verify");
			$('#downText').attr("lay-verify","required");
			$('#topText').attr("lay-verify","required");
			$('#minText').attr("lay-verify","required");
        	$(".publicHide_content").hide();
        	$("#menuDiv").show();
        }
	}
</script>
</body>
</html>